<!--轮播图上面的导航内部的子菜单的详情-->
<template>
  <div class="navContent">
    <div class="content-left">
      <div class="contentchange">
        <span>{{ title }}</span>
        <ul class="content__left--title">
          <!-- <li 
            class="content__left--item"
            v-for="(item, index) in children" 
            :key="item.id" 
            @click="jumpDetails(item)" 
            @mouseenter="showDetails(item, index)"
            @mouseleave="hideDetails(item, index)"
          > -->
          <li 
            class="content__left--item"
            v-for="(item, index) in children" 
            :key="item.id" 
            @mouseenter="showDetails(item, index)"
            @mouseleave="hideDetails(item, index)"
          >
            <i></i>
            {{ item.name }}
            <transition name="bounce">
              <div v-show="isShowArr[index]" class="content__right--content" >
                <cite v-for="i in item.children" :key="i.id" @click.stop="jumpDetails(i)" v-cloak>{{i.name}}</cite>            
              </div>
            </transition>
          </li>
        </ul>
      </div>
    </div>
    <div class="content-right">
      <div class="w238">
        <p class="text-title">若找不到采购的产品或产品型号，请点击“发布求购”,发布采购需求或联系客服。</p>
        <div class="btn" @click="jumpoffer">发布求购--></div>
        <div class="line"></div>
        <div class="Consultation">客服咨询</div>
        <p class="suiyi">如有其他问题，可点击右下方”联系客服“，进行在线咨询。</p>
        <p class="suiyi julitop">客服在线时间：</p>
        <p class="suiyi">周一到周五</p>
        <p class="suiyi">08:00—12:00am 14:00—17:00pm</p>
      </div>
    </div>
  </div>
</template>
<script>
import image from "../../../assets/images/picsss.png"
export default {
  name: "BannerNavContent",
  props: {
    title: String,
    children: Array
  },

  data() {
    return {
      isShowArr:[],
      bottompic: image,
      timer: null,
    }
  },
  mounted() {
    this.children.forEach(item =>{
      this.isShowArr.push(false)
    })
  },
  methods: {
    // 鼠标移出事件
    hideDetails(item, index){
      let timer = setTimeout(()=> {
        clearTimeout(timer);
        this.$set(this.isShowArr,index, false); 
      },300)
      clearTimeout(this.timer);
    },

    // 鼠标进入事件
    showDetails(item, index) {
      this.timer = setTimeout(()=> {
        this.childrenShowInfo = item.children;
        this.$set(this.isShowArr,index, true);
      },300)
    },

    jumpDetails(item) {
      this.$store.commit('ListTreeId',item.id)
      this.$router.push({
        name: "productList",
        params: {
          id : item.id,
          item
        }
      })
    },

    // 前往报价
    jumpoffer() {
      this.$router.push({
        name: "purchaseCenter",
        params: {
          sonshow: false
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.bounce-enter-active {
  animation: bounce-in .2s;
}
.bounce-leave-active {
  animation: bounce-in .2s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(0.75);
  }
  100% {
    transform: scale(1);
  }
}

.navContent {
  display: flex;
  flex-direction: row;
  position: relative;
  height: 420px;
  padding-bottom: 21px;
  .content-left {
    width: 861px;
    height: 399px;
    .contentchange {
      width: 100%;
      height: 399px;
      overflow: auto;
      span {
        font-weight: 800;
        display: inline-block;
        width: 80%;
        font-size: 14px;
        color: #ff6c00;
        text-indent: 10px;
        border-left: 4px solid #ff6c00;
        margin-left: 30px;
        margin-top: 10px;
        margin-bottom: 14px;
      }
      .content__left--title {
        width: 225px;
        padding-left: 52px;
        .noData{
          width: 100%;
          height: 200px;
          line-height: 200px;
          text-align: center;
          font-size: 60px;
          color: #ffaa55;
        }
        .content__left--item {
          display: flex;
          flex-direction: row;
          align-items: center;
          line-height: 33px;
          color: #4f4f4f;
          text-indent: 14px;
          font-size: 12px;
          font-weight: bold;
          cursor: pointer;
          i {
            width: 6px;
            height: 6px;
            background: #cdcdcd;
            margin-right: 10px;
          }
          
          &:hover {
            transition: all 0.2s ease-out;
            color: #3699eb;
            i {
              transition: all 0.2s ease-out;
              border-radius: 50%;
              background: #3699eb;
            }
          }
          .content__right--content{
            width: 567px;
            height: 350px;
            overflow: auto;
            position: absolute;
            top: 0px;
            left:277px;
            padding-top: 45px;
            cite {
              display: inline-block;
              box-sizing: border-box;
              font-style: normal;
              color:#818781;
              height: 33px;
              font-weight: normal;
              line-height: 32px;
              border-bottom: 1px dashed #ececec;
              &:hover{
                transition: all 0.2s ease-out;
                color: #3699eb;
              }
            }
          }
        }
      }
    }
    .image {
      position: absolute;
      bottom: 0px;
      z-index: -5;
      img{
        width: 100%;
      }
      width: 508px;
      height: 150px;
      opacity: 0.2;
    }
  }
  .content-right {
    box-sizing: border-box;
    width: 125px;
    height: 420px;
    background: #f5f5f5;
    padding: 0 6px;
    .w238 {
      // width: 238px;
      margin: auto;
      .text-title {
        color: #4b4b4b;
        font-size: 14px;
        margin-top: 25px;
        line-height: 22px;
        margin-bottom: 14px;
      }
      .btn {
        width: 110px;
        height: 36px;
        background: #ff7e00;
        color: #fff;
        line-height: 36px;
        text-align: center;
        font-size: 14px;
        margin-left: 3px;
        cursor: pointer;
        &:hover{
          background:#ffaa55;
          transition: all 0.3s;
          border-radius: 3px;
        }
      }
      .line {
        width: 100%;
        height: 24px;
        border-bottom: 1px #cccccc dashed;
      }
      .Consultation {
        margin-left: 3px;
        color: #4b4b4b;
        font-size: 14px;
        font-weight: 800;
        line-height: 36px;
        margin-top: 13px;
      }
      .suiyi {
        color: #7a7a7a;
        font-size: 12px;
        line-height: 20px;
        padding-left: 12px;
      }
      .julitop {
        margin-top: 20px;
      }
    }
  }
}
</style>
